<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>业务定制</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">


</head>

<body>
<div id="businesscreate">
    <div style="color: black; font-size: 20px; margin: 10px 0">业务定制</div>
    <!--                <div style="color: cornflowerblue; font-size: 20px; margin: 10px 0" >请按照顺序排序</div>-->

    <div style="height: 1px; background-color: white"></div>
    <!--                <el-input v-model="search" style="width: 20%;" suffix-icon="el-icon-search" placeholder="请输入名称按回车搜索" @keyup.enter.native="loadTable"></el-input>-->
    <!--                <el-button @click="add" type="primary" size="mini" style="margin: 10px 0">新增</el-button>-->
    <!--                <el-button @click="exp" type="primary" size="mini" style="margin: 10px 0">导出</el-button>-->


    <el-table
            ref="multipleTable"
            row-key="id"
            :data="tableData"
            @selection-change="handleSelectionChange"
            border
            style="width: 100%">
        <el-table-column

                type="selection"
        >

        </el-table-column>
        <el-table-column
                v-for="(item,index) in props"
                :prop="item.prop"
                :label="item.label"
        >
        </el-table-column>
        <el-table-column
                fixed="right"
                label="负责医生"
        >
            <template scope="scope">
                <el-select v-model="tableData[scope.$index].doctorid" placeholder="请选择">
                    <el-option v-for="item in doctor" :key="item" :label="item" :value="item">
                        <span style="float: left">{{ item }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{item}}</span>
                    </el-option>
                </el-select>
            </template>
        </el-table-column>

    </el-table>

    <el-button type="primary" @click="sortprocess">下一步</el-button>
    <!--                <pre style="text-align: left">-->
    <!--                 {{tableData}}-->
    <!--                </pre>-->
    <el-dialog title="详细业务信息" :visible.sync="dialogFormVisible" width="30%"
               close-on-click-modal="false" close-on-press-escape="false" show-close="false">
        <el-form>
            <el-form-item label="业务名称" label-width="100px">
                <el-input v-model="businessname" autocomplete="off" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="业务功能描述" label-width="100px">
                <el-input v-model="businessdes" autocomplete="off" style="width: 80%"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="sortprocess">确 定</el-button>
        </div>
    </el-dialog>
    <!--    内容-->

</div>

</body>
<script src="../../js/vue.min.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/base.js"></script>
<script src="../../js/Sortable-1.10.2.js"></script>
<script src="../../js/vuedraggable.umd.js"></script>


<script type="text/javascript">
    <!--    js内容 -->


    Vue.component('Sortable', window.Sortable.name);
    //传入的数据的格式{
    //  "businessname":"businessname",
    //  "process":"1,2,3,4,5",
    //  "doctorid":"tom1,jerry1,tom2,jerry2,tom3",
    //  "startposition":"tom1",
    //  "description":"业务的描述"
    //
    //  }

    function user() {
        let urlBase = "/user";
        new Vue({
            el: "#businesscreate",
            data() {
                return {
                    selectflag:0,
                    user: {},
                    businesssize:5,
                    tabledata1:[],
                    doctor:[],
                    tableData: [],
                    // pageNum: 1,
                    // pageSize: 10,
                    // total: 0,
                    dialogFormVisible: false,
                    businessname:"",
                    businessdes:"",
                    isCollapse: false,
                    multipleSelection: [],
                    options: [],
                    goalmsg:{
                        bussnessname:"",
                        process:"",
                        doctorid:"",
                        startposition:"",
                        description:""

                    },
                    goal:[],
                    props: [{"label":"流程编号","prop":"id"},{"label":"名称","prop":"bussnessname"},{"label":"描述","prop":"idnum"}]

                }
            },
            created() {
                this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
                this.loadTable();
            },
            mounted() {
                // this.rowDrop();

            },
            methods: {
                edit(obj) {
                    this.entity = obj;
                    this.dialogFormVisible = true;
                },
                rowDrop() {
                    const tbody = document.querySelector('.el-table__body-wrapper tbody')
                    // console.log(tbody);
                    const _this = this
                    Sortable.create(tbody, {

                        onEnd({newIndex, oldIndex}) {

                            const currRow = _this.tableData.splice(oldIndex, 1)[0]
                            _this.tableData.splice(newIndex, 0, currRow)
                            // console.log(this.tableData);
                        }
                    })
                },
                handleCollapse() {
                    this.isCollapse = !this.isCollapse;
                },

                reselect() {
                    this.dialogFormVisible = false
                },
                subbmit() {
                    $.ajax({
                        url: "/business/create",


                    })

                },
                sortprocess() {
                    if (this.selectflag == 0) {
                        // this.tableData = this.multipleSelection;
                        for (var i = 0; i < this.multipleSelection.length; i++) {
                            this.goal.push({
                                bussnessname: "",
                                id: "",
                                description: "",
                                doctorid: ""

                            });
                            this.goal[i].bussnessname = this.multipleSelection[i].bussnessname;
                            this.goal[i].id = this.multipleSelection[i].id;
                            this.goal[i].description = this.multipleSelection[i].description;
                        }
                        this.tableData = this.goal;
                        console.log(this.tableData);
                        this.rowDrop();
                        // this.dialogFormVisible = true;
                        this.selectflag = 1;
                    } else if (this.selectflag == 2) {
                        this.dialogFormVisible = false;
                        //传入的数据的格式{
                        //  "businessname":"businessname",
                        //  "process":"1,2,3,4,5",
                        //  "doctorid":"tom1,jerry1,tom2,jerry2,tom3",
                        //  "startposition":"tom1",
                        //  "description":"业务的描述"
                        //
                        //  }
                        console.log(this.tableData);
                        let goalprocess;
                        let goaldoctor;
                        for (var i = 0; i < this.tableData.length; i++) {
                            if (i == 0) {
                                goalprocess = this.tableData[i].id;
                                goaldoctor = this.tableData[i].doctorid;
                            } else {
                                goalprocess = goalprocess + "," + this.tableData[i].id;
                                goaldoctor = goaldoctor + "," + this.tableData[i].doctorid;
                            }
                        }
                        let goaldata = {
                            "businessname": this.businessname,
                            "processid": goalprocess,
                            "doctorid": goaldoctor,
                            "startposition": this.tableData[0].doctorid,
                            "description": this.businessdes
                        };
                        console.log(goaldata);
                        $.ajax({
                            url: "/business/create",
                            type: "POST",
                            contentType: "application/json",
                            data: JSON.stringify(goaldata)
                        }).then(res => {
                            this.$message(res.msg);
                            console.log(res);
                        })

                    } else if (this.selectflag == 1) {
                        this.dialogFormVisible = true;
                        this.selectflag = 2;

                    }


                },
                print() {
                    console.log(this.multipleSelection);
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },

                loadTable() {
                    $.get("/process/getprocessall").then(res => {
                        console.log(res.data[0].bussnessname);
                        for (var i = 0; i < res.data.length; i++) {
                            this.tableData.push({
                                bussnessname: "",
                                id: "",
                                description: "",
                                doctorid: ""
                            });
                            this.tableData[i].bussnessname = res.data[i].bussnessname;
                            this.tableData[i].id = res.data[i].id;
                            // this.tableData1[i].description= res.data[i].description;
                        }

                        this.tableData1 = this.tableData;
                        console.log(this.tableData);
                        console.log(this.tableData1);
                    })
                    $.get("/user/doctor").then(res => {
                        this.doctor = res.data;
                    })
                    $.get("/role").then(res => {
                        this.options = res.data;
                    })
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },


                save() {
                    let type = this.entity.id ? "PUT" : "POST";
                    $.ajax({
                        url: urlBase,
                        type: type,
                        contentType: "application/json",
                        data: JSON.stringify(this.entity)
                    }).then(res => {
                        if (res.code === '0') {
                            this.$message({
                                message: "保存成功",
                                type: "success"
                            });
                            this.loadTable();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            })
                        }
                        this.dialogFormVisible = false;
                    })
                },


            }
        })

    }

    user();
</script>


</html>